<template>
    <div class="button-container" style="margin-top: 100px;">
        <el-button v-for="(item, index) in buttonList" :key="index" type="outlined" border-radius="5px"
            style="margin:5px; border-color: #409eff; color: #409eff;" @click="handleButtonClick(index)">
            {{ index + 1 + item.text }}
        </el-button>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';

const buttonList = Array(8).fill({ text: '床 张三' });
/**
 * 处理按钮点击事件
 * @param index - 被点击按钮的索引值
 */
const handleButtonClick = (index: number) => {
    console.log('Button clicked:', index);
    router.push({ path: '/AdmAssess' });
}
</script>

<style scoped>
.button-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 每行4列，自动换行 */
    justify-content: center;
    gap: 20px;
    padding: 20px;
}
</style>